<template>
  <div>
    <nav-bar title="修改密码"></nav-bar>
    <div class="forgetPassword">
      <input-icon type="password" icon="password" placeholder="输入旧密码" v-model="oldPwd"></input-icon>
      <input-icon :type="type" icon="password" placeholder="输入新密码" :iconRight="iconRight" v-model="pwd" @updateIcon="updateIcon"></input-icon>
      <input-icon type="password" icon="password" placeholder="确认新密码" v-model="rePwd"></input-icon>
      <van-button class="forgetPasswordBth" round block type="info" native-type="submit" @click="onSubmit">
        确认
      </van-button>
    </div>
  </div>
</template>

<script>
  import userApi from '../../../api/userAPI.js'
  import inputIcon from '../../../components/InputIcon.vue'
  export default {
    components:{
      inputIcon
    },
    data() {
        return {
          type: 'password',
          iconRight: 'eyeClose',
          pwd: '',
          rePwd:　'',
          oldPwd: ''
        };
      },
      methods: {
        updateIcon(iconType) {
          this.pwd = this.pwd
          if (iconType === 'eyeClose') {
            this.type = 'text'
            this.iconRight = 'eyeOpen'
          } else {
            this.type = 'password'
            this.iconRight = 'eyeClose'
          }
        },
        onSubmit() {
          if (this.oldPwd === '') {
            this.$toast.fail('旧密码不能为空');
            return
          }
          if (this.pwd === '') {
            this.$toast.fail('新密码不能为空');
            return
          }
          if (this.rePwd === '') {
            this.$toast.fail('新密码确认不能为空');
            return
          }
          if (this.rePwd !== this.pwd) {
            this.$toast.fail('两次密码不一致');
            return
          }
          this.$router.push({
            path: '/'
          })
        },
      }
  }
</script>

<style scoped lang="scss">
  .forgetPassword{
    text-align: center;
    background-color: #fff;
    padding: 0.9375rem;
    .forgetPasswordBth{
      margin-top: 1rem;
    }
    .logo{
      height: 10rem;
    }
  }
</style>
